// 重新默认的顶部菜单
<template>
  <div @mousedown="mousedown" @mousemove="mousemove" @mouseup="mouseup" ref="topBar" class="top-bar">
    <div>SNAKE</div>
    <div class="img">
      <i @click="minimize" class="iconfont icon-suoxiao"></i>
      <i @click="maxCli" class="iconfont icon-fangda"></i>
      <i @click="close" class="iconfont icon-guanbi"></i>
    </div>
  </div>
</template>

<script setup>
const { ref } = require("@vue/reactivity")
// const { onMounted }=require("@vue/runtime-core")

const { ipcRenderer } = window.require("electron")

const isMax = ref(false)
const minimize = () => {
  ipcRenderer.send('mainwin-minimize')
}
const maxCli = () => {
  if(isMax.value) {
    ipcRenderer.send('mainwin-restore')
    } else {
    ipcRenderer.send('mainwin-maximize')
  }
  isMax.value = !isMax.value
}
const close = () => {
  ipcRenderer.send('mainwin-close')
}

// const topBar = ref(null)
// onMounted(() => {
//   topBar.addEventListener('mouseover', () => {})
// })

let isMousedown = false
let baseX = 0
let baseY = 0

const mousedown = e => {
  console.log('move-topbar-mousedown', e)
  isMousedown = true
  baseX = e.x
  baseY = e.y
}

const mousemove = e => {
  if(isMousedown) {
    ipcRenderer.send('move-topbar', {
      x: e.screenX - baseX,
      y: e.screenY - baseY
    })
    // console.log('move-topbar-666', e)

    console.log('move-topbar-666', {
      x: e.screenX - baseX,
      y: e.screenY - baseY
    })
  }
}
const mouseup = () => {
  isMousedown = false
}
</script>


<style lang="scss" scoped>
.top-bar {
  height: 10vh;
  display: flex;
  background: #000;
  color: white;
  align-items: center;
  font-size: 6vh;
  padding: 0 2vh;
  justify-content: space-between;
  .img {
    display: flex;
    // height: 8vh;
    i {
      // width: 100%;
      display: block;
      // height: 100%;
      margin-right: 2vh;
      border-radius: 50%;
      width: 100%;
      padding: 1vh;
      font-size: 5vh;
      cursor: pointer;
      &:hover {
        background-color: #f2f2f2;
        color: #000;
      }
    }
  }
}
</style>